<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/4.0.0/css/bootstrap.min.css">
    <link rel="stylesheet" href="./stylesheets/photo.css">
    <style media="screen">
      .container {
        border: 1px solid #eee;
      }

      .row {
        min-height: 600px;
      }

      .row .row {
        /* background-color: #469567 */
      }

      [class*=col] {
        background-color: #eee;
        padding: 0 10px;
      }
    </style>
  </head>
  <body>
    <div class="container">
      <nav class="nav">
        <a class="navbar-brand" data-toggle="collapse" aria-expanded="false" aria-controls="collapseExample" href="#collapseExample">天册</a>
        <a class="nav-link" href="#">用户信息</a>
        <a class="nav-link" href="#">关注</a>
        <a class="nav-link" href="#">用户信息</a>
        <a class="nav-link" href="#">粉丝</a>
        <a class="nav-link" href="#">关注动态</a>
        <a class="nav-link" href="#">回复我的</a>
        <a class="nav-link" href="#">私信</a>
        <a class="nav-link photo_album disabled" href="#">相册</a>
        <a class="nav-link" href="#">关注</a>
        <a class="nav-link" href="#">提到我</a>
        <a class="nav-link" href="#">我回复的</a>
        <a class="nav-link" href="#">我的主题帖</a>
      </nav>

      <div class="jumbotron collapse" id="collapseExample"  style="max-height:200px;padding:25 30">
        <h1 class="display-5">天之册网站简介</h1>
        <p class="lead">This is a simple hero unit, a simple jumbotron-style component for calling extra attention to featured content or information.</p>
      </div>


      <div class="row">
        <div class="col-1 left list-group" style="padding:0">
            <li class="list-group-item d-flex justify-content-between align-items-center defaultAll">
               <a>全部</a>
             </li>
        </div>
        <div class="col  main">
          <header>
            <input type="file" name="" value="" onchange="createReader(event)" multiple>
            <button type="button" class="btn btn-primary btn-md create-photoalbum">创建相册</button>
            <button type="button" class="btn btn-primary btn-md upload-photo">上传照片</button>
          </header>
            <div class="photo_container row" style="padding:10px">

            </div>
          <footer>
              <ul class="pagination">
                <!-- <li class="page-item"><a class="page-link" href="#">Prev</a></li>
                <li class="page-item active"><a class="page-link" href="#">1</a></li>
                <li class="page-item"><a class="page-link" href="#">Next</a></li> -->
              </ul>
          </footer>
        </div>
      </div>
    </div>

<script type="text/javascript" src="./javascripts/photo.js">

</script>
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/popper.js/1.12.9/umd/popper.js"></script>
    <script type="text/javascript" src="https://cdn.bootcss.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
  </body>
</html>
